<!-- eslint-disable vue/no-ref-as-operand -->
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable vue/no-ref-as-operand -->
<!-- eslint-disable vue/attribute-hyphenation -->
<template>
  <div class="detail-dialog">
    <el-dialog v-model="showDialog" :show-close="false" width="75%" :destroy-on-close="true" :before-close="closeDialog">
      <template #header>
        <div class="my-header">
          <span>
            <h3>{{ title }}</h3>
          </span>
          <span>
            <el-button type="danger" @click="closeDialog">
              <CircleCloseFilled />
              关闭
            </el-button>
          </span>
        </div>
      </template>
      <div>
        <div class="content">
          <display-search
            ref="DisplaySearchRef"
            class="super-table-display-search"
            v-bind="searchConfig"
            v-model="searchFormData"
            @resetQueryData="handleResetBtnClick"
            @queryData="handleQueryBtnClick"
          />
          <display-table
            class="detail-dialog-display-table"
            :ref="displayTableRef"
            :showIndexColumn="true"
            :detailPropList="detailPropList"
            :detailDataList="detailDataList"
            :header_cell_style="header_cell_style"
            :detailDataConut="detailDataConut"
            :multipleSelect="multipleSelect"
            :allSelectedData="allSelectedData"
            :selectedPropList="selectedPropList"
            @emitReturnInfo="emitReturnInfo"
            v-model:page="pageInfo"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, toRefs, watch, nextTick, defineExpose } from "vue";
import DisplayTable from "./DisplayTable.vue";
import DisplaySearch from "./DisplaySearch.vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
const emit = defineEmits(["emitReturnInfo"]);

const props = defineProps({
  searchConfig: {
    //搜索区域的表单配置
    type: Object,
    require: false,
    default: () => ({})
  },
  multipleSelect: {
    //多选还是单选
    type: Boolean,
    require: false,
    default: false
  },
  keyword: {
    type: String,
    require: false,
    default: ""
  },
  getDataFunction: {
    //数据查询方法
    type: Function,
    require: false,
    default: () => []
  },
  detailPropList: {
    //表格的列以及属性
    type: Array,
    require: true,
    default: () => []
  },
  allSelectedData: {
    //当前已选的数据
    type: Array,
    require: true,
    default: () => []
  },
  selectedPropList: {
    //已选择表格的表格的列信息
    type: Array,
    require: false,
    default: () => []
  }
});
//解析props,
const { searchConfig } = toRefs(props);
//当前弹窗左上角标题
const title = ref("选择数据");
const DisplaySearchRef = ref(null); //可修改的
//定义此弹框显示开关
const showDialog = ref(false);
//定义表格实例对象
const displayTableRef = ref(null);
//el-table表头样式
const header_cell_style = {};
const detailDataList = ref([]); //可修改的
const listLoading = ref(false);
const detailDataConut = ref(0); //可修改的
const pageInfo = ref({ currentPage: 1, pageSize: 10 });

//定义一个对象searchFormData，存储的是search的数据
// eslint-disable-next-line vue/no-ref-as-operand
const formItems = searchConfig?.formItems ?? [];
const formOriginData = {};
for (const item of formItems) {
  formOriginData[item.field] = "";
}
const searchFormData = ref(formOriginData);

//获取数据接口，接口内容由调用该组件的地方写，必须是返回promise的方法
//点击了清空按钮逻辑
const handleResetBtnClick = () => {
  //把表单数据清空
  searchFormData.value = formOriginData;
  //改成第一页
  pageInfo.value.currentPage = 1;
  //重新查询
  getPageData();
};
//点击了查询按钮逻辑
const handleQueryBtnClick = () => {
  pageInfo.value.currentPage = 1;
  getPageData();
};

const getPageData = async () => {
  listLoading.value = true;
  const { querysuccess, totalcount, datalist } = await props.getDataFunction(
    pageInfo.value.currentPage,
    pageInfo.value.pageSize,
    { ...searchFormData.value, ...props.fixedCondition }
  );
  if (querysuccess) {
    detailDataConut.value = totalcount;
    detailDataList.value = datalist;
  }
  listLoading.value = false;
};
//监听子组件的分页器，如果变化，那么重新查询数据
watch(pageInfo, () => getPageData());
watch(
  () => showDialog.value,
  () => {
    if (showDialog.value) {
      //1遍历一下searchConfig?.value?.formItems
      let firstQueryParams = {};
      searchConfig?.value?.formItems?.forEach(item => {
        if (item.defaultValue) {
          firstQueryParams[item.field] = item.defaultValue;
        }
      });
      nextTick(() => {
        DisplaySearchRef.value.subModelValue = {
          ...DisplaySearchRef.value.subModelValue,
          ...props.initSearchData,
          ...firstQueryParams
        };
        searchFormData.value = { ...searchFormData.value, ...props.initSearchData, ...firstQueryParams };
        getPageData();
      });
    }
  }
);
const closeDialog = () => {
  //1.关闭弹框
  showDialog.value = false;
};
const emitReturnInfo = data => {
  emit("emitReturnInfo", data);
};
defineExpose({
  showDialog,
  getPageData
});
</script>
<style scoped>
.super-table-display-search {
  width: 100%;
}
.tabletext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-dialog {
  position: absolute;
}
.detail-dialog-display-table {
  border-top: 1px solid rgb(204 202 202);
}

/* 搜索区域的form-item底部外边距改为0 */
.display-search-form :deep() .el-form-item {
  margin-bottom: 18px !important;
}

/* 弹框上部空白缩小 */
.detail-dialog :deep() .el-dialog__body {
  padding: 10px;
}

/* 底部分页器居中 */
.detail-dialog-display-table :deep() .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 50px;
  border-top: 1px solid rgb(204 202 202);
}

/* eldialog顶部样式 */
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.myselect :deep() .el-cascader__tags .el-tag {
  max-width: 70%;
}
</style>
